import React, { memo, useEffect, useMemo, useState } from "react";
// import Select from "react-select";
import CreatableSelect from "react-select/creatable";
import axios from "src/api/index";
import PropTypes from "prop-types";

const Selector = props => {
    const {
        onChange,
        value,
        data,
        fieldProps,
        selectCallBack,
        initSelect,
        changeField,
        name,
        hidden,
        editabled,
    } = props;

    const [options, setOptions] = useState([]);
    const [inputValue, setInputValue] = React.useState("");

    const selectChange = options => {
        const { value, label } = options;
        onChange && onChange({ [name]: label, [changeField]: value });
        selectCallBack && selectCallBack[fieldProps["changeFunc"]]?.(options);
    };

    useEffect(() => {
        if (data) {
            const first = data[0];
            setOptions(data);
            !hidden &&
                initSelect &&
                first &&
                onChange &&
                onChange({ [name]: first?.label, [changeField]: first?.value });
            !hidden &&
                initSelect &&
                selectCallBack &&
                selectCallBack[fieldProps["changeFunc"]]?.(first);
        }
    }, [props.data]);

    const v = useMemo(() => {
        const selected = options.find(opt => {
            if (typeof value !== "object") return opt.label === value || opt.value === value;
            return opt.value === value?.[changeField] || opt.label === value?.[name];
        });
        editabled && !selected && setInputValue(value);
        return selected;
    }, [value, options]);

    const onInputChange = (val, actionMeta) => {
        if (actionMeta.action === "input-change") {
            onChange?.(val);
            setInputValue(val);
        }
    };

    return (
        <CreatableSelect
            value={v}
            onChange={selectChange}
            options={options}
            inputValue={inputValue}
            onInputChange={onInputChange}
        />
    );
};

const PactSelector = props => {
    const { projId, pactId, pactType, ...rest } = props;

    const [options, setOptions] = useState([]);

    const getData = async () => {
        let data = {
            projId,
        };
        if (pactType) {
            data.pactType = pactType;
        } else {
            data.pactId = pactId;
        }
        const res = await axios({
            url: "/getProjPact",
            data,
        });
        if (res.success) {
            const options = res.data.map(opt => {
                return {
                    label: opt.pactName,
                    value: opt.pactId,
                };
            });
            setOptions(options);
        }
    };

    useEffect(() => {
        projId && getData();
    }, [projId, pactId]);

    return <Selector {...rest} data={options} />;
};

const WbsSelector = props => {
    const { projId, pactId, pactType, pactCode, ...rest } = props;

    const [options, setOptions] = useState([]);

    const getData = async () => {
        let data = {
            projId,
            pactType,
        };
        if (pactCode === "030") {
            //施工
            data.pactId = pactId;
        } else if (pactCode === "015") {
            //监理
            data.jlPactId = pactId;
        }
        const res = await axios({
            url: "/getProjectSite",
            data,
        });
        if (res.success) {
            const options = res.data.map(opt => {
                return {
                    label: opt.id,
                    value: opt.name,
                };
            });
            setOptions(options);
        }
    };

    useEffect(() => {
        pactId && getData();
    }, [projId, pactId]);

    return <Selector {...rest} data={options} />;
};

const OrgSelector = props => {
    const { projId, pactId, pactType, pactCode, ...rest } = props;

    const [options, setOptions] = useState([]);

    const getData = async () => {
        const res = await axios({
            url: "/userorg_query",
            data: {
                pactId,
                pactType,
            },
        });
        if (res.success) {
            const options = res.data.map(opt => {
                return {
                    label: opt.orgName,
                    value: opt.orgId,
                };
            });
            setOptions(options);
        }
    };

    useEffect(() => {
        projId && getData();
    }, [projId, pactId]);

    return <Selector {...rest} data={options} />;
};

Selector.propTypes = {
    onChange: PropTypes.func,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
    data: PropTypes.arrayOf(
        PropTypes.shape({
            label: PropTypes.string,
            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        }),
    ),
    fieldProps: PropTypes.shape({
        options: PropTypes.string,
        changeFunc: PropTypes.string,
    }),
    selectCallBack: PropTypes.objectOf(PropTypes.func),
    initSelect: PropTypes.bool,
    changeField: PropTypes.string,
    name: PropTypes.string,
    hidden: PropTypes.bool,
    editabled: PropTypes.bool,
};

PactSelector.propTypes = {
    projId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    pactId: PropTypes.number,
    pactType: PropTypes.string,
    onChange: PropTypes.func,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
    selectPact: PropTypes.bool,
    fieldProps: PropTypes.shape({
        optionsName: PropTypes.string,
        changeFunc: PropTypes.string,
    }),
    selectCallBack: PropTypes.objectOf(PropTypes.func),
    initSelect: PropTypes.bool,
};

WbsSelector.propTypes = {
    projId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    pactId: PropTypes.number,
    pactCode: PropTypes.string,
    pactType: PropTypes.string,
    onChange: PropTypes.func,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
    selectPact: PropTypes.bool,
    fieldProps: PropTypes.shape({
        optionsName: PropTypes.string,
        changeFunc: PropTypes.string,
    }),
    selectCallBack: PropTypes.objectOf(PropTypes.func),
    initSelect: PropTypes.bool,
};

OrgSelector.propTypes = {
    projId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    pactId: PropTypes.number,
    pactCode: PropTypes.string,
    pactType: PropTypes.string,
    onChange: PropTypes.func,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
    selectPact: PropTypes.bool,
    fieldProps: PropTypes.shape({
        optionsName: PropTypes.string,
        changeFunc: PropTypes.string,
    }),
    selectCallBack: PropTypes.objectOf(PropTypes.func),
    initSelect: PropTypes.bool,
};

export { Selector, PactSelector, WbsSelector, OrgSelector };
